<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<style type="text/css">
			.talk_con {
				width: 600px;
				height: 500px;
				border: 1px solid #666;
				margin: 50px auto 0;
				background: #f9f9f9;
			}
			
			.talk_show {
				width: 580px;
				height: 420px;
				border: 1px solid #666;
				background: #fff;
				margin: 10px auto 0;
				overflow: auto;
			}
			
			.talk_input {
				width: 580px;
				margin: 10px auto 0;
			}
			
			.whotalk {
				width: 80px;
				height: 30px;
				float: left;
				outline: none;
			}
			
			.talk_word {
				width: 420px;
				height: 26px;
				padding: 0px;
				float: left;
				margin-left: 10px;
				outline: none;
				text-indent: 10px;
			}
			
			.talk_sub {
				width: 56px;
				height: 30px;
				float: left;
				margin-left: 10px;
			}
			
			.atalk {
				margin: 10px;
			}
			
			.atalk span {
				display: inline-block;
				background: #0181cc;
				border-radius: 10px;
				color: #fff;
				padding: 5px 10px;
			}
			
			.btalk {
				margin: 10px;
				text-align: right;
			}
			
			.btalk span {
				display: inline-block;
				background: #ef8201;
				border-radius: 10px;
				color: #fff;
				padding: 5px 10px;
			}
		</style>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
	</head>

	<body>
		<div class="talk_con" id="app">
			<div class="talk_show" id="words" v-for=" item in content">
				<!--
					因为所有的A说或者B说，都是在这个区间进行展示，那么就可以使用for
				-->
				<div v-for="item in content"><span> {{item.who}}说：{{item.say}}</span></div>
			</div>
			<div class="talk_input">
				<select class="whotalk" id="who" v-model="sel">
					<option value="0">A说：</option>
					<option value="1">B说：</option>
				</select>
				<input type="text" class="talk_word" id="talkwords" >
				<input type="button" value="发送" class="talk_sub" id="talksub">
			</div>
		</div>
	</body>
	<script type="text/javascript">
		// 注意：如果JS和vue进行混合使用，那么vue在执行的时候，会重新加载这个界面,然后在进行自上而下的代码执行,
		// vue的优先级比较高
		var vm = new Vue({
			el:'#app',
			data:{
				content:[{ who:'A', say:'吃饭了吗？' },
				   { who:'B', say:'还没呢，你呢？' },]
			}
		})
		
		
		
		
	</script>

</html>